---
title: Compare tiles with SuperTinyIcons
layout: default
noindex: true
redirect_from: /util/tile-vs-supertiny.html
---
<style>
    /* Container needed to position the overlay */
    .img-container {
        position: relative;
        height: 128px;
        width: 128px;
    }

    .img-container-icon {
        padding: 15px;
    }

    .img-preview {
        width: 128px;
        height: 128px;
    }

    .img-preview-icon {
        width: 98px;
        height: 98px;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 128px;
        height: 128px;
    }

    img-overlay {
        width: 128px;
        height: 128px;
    }


</style>
<p>This is a page to compare the tiles with the ones from <a href="https://github.com/edent/SuperTinyIcons">SuperTinyIcons</a>.</p>

{%- assign sorted_pages = site.pages | sort:'sort' -%}
<div>
    Overlay image:
    <button class="btn" id="btn-none">none</button>
    <button class="btn" id="btn-yellow">yellow</button>
    <button class="btn" id="btn-red">red</button>
    <button class="btn" id="btn-black">black</button>
    <button class="btn" id="btn-hollow">black lines</button>
    <button class="btn" id="btn-white">white lines</button>
</div>
<div>
    Overlay opacity:
    <button class="btn" id="btn-opacity10">10%</button>
    <button class="btn" id="btn-opacity25">25%</button>
    <button class="btn" id="btn-opacity50">50%</button>
    <button class="btn" id="btn-opacity100">100%</button>
</div>
<div>
    <table class="table table-bordered" style="width:inherit;">
        <thead>
        <tr>
            <th>VLZ Tile</th>
            <th>STI</th>
            <th>Name</th>
        </tr>
        </thead>
        <tbody>
        {%- for logopage in sorted_pages %}{% if logopage.logohandle -%}
        {%- capture sti_file %}{{ site.data.supertinyicons[logopage.logohandle] | default: logopage.logohandle }}{% endcapture -%}
        {%- capture tilefile %}{{ logopage.logohandle }}{{ '-tile.svg' }}{% endcapture -%}
        {%- if logopage.images contains tilefile -%}
        <tr>
            <td>
                <div class="img-container"><img alt="tile of {{logopage.title}}" class="img-preview" src="/logos/{{logopage.logohandle}}/{{tilefile}}" />
                    <div class="overlay">
                        <img class="img-overlay" src="/images/overlay/tile-hollow.svg" />
                    </div>
                </div>
            </td>
            <td>
                {%- if sti_file != '-' -%}
                <div class="img-container"><img alt="SuperTinyIcon version of {{logopage.title}}" class="img-preview" src="https://github-logos.vectorlogo.zone/super-tiny-icons/{{sti_file}}.svg" />
                    <div class="overlay">
                        <img class="img-overlay" src="/images/overlay/tile-hollow.svg" />
                    </div>
                </div>
                {%- endif -%}
            </td>
            <td><a href="{{logopage.url}}{{site.indexpage}}">{{logopage.title | default: "(untitled)"}}</a></td>
        </tr>
        {%- endif %}{% endif %}{% endfor -%}
        </tbody>
    </table>
</div>
<script>
    $(document).ready(function() {
        $("#btn-none").click(function() {
            $(".img-overlay").attr("src", "/images/overlay/tile-none.svg").css("width", "128px").css("height", "128px");
        });
        $("#btn-yellow").click(function() {
            $(".img-overlay").attr("src", "/images/overlay/tile-yellow.svg").css("width", "128px").css("height", "128px");
        });
        $("#btn-red").click(function() {
            $(".img-overlay").attr("src", "/images/overlay/tile-red.svg").css("width", "128px").css("height", "128px");
        });
        $("#btn-black").click(function() {
            $(".img-overlay").attr("src", "/images/overlay/tile-black.svg").css("width", "128px").css("height", "128px");
        });
        $("#btn-hollow").click(function() {
            $(".img-overlay").attr("src", "/images/overlay/tile-hollow.svg").css("width", "128px").css("height", "128px");
        });
        $("#btn-white").click(function() {
            $(".img-overlay").attr("src", "/images/overlay/tile-white.svg").css("width", "128px").css("height", "128px");
        });
        $("#btn-opacity10").click(function() {
            $(".img-overlay").css("opacity", "0.1");
        });
        $("#btn-opacity25").click(function() {
            $(".img-overlay").css("opacity", "0.25");
        });
        $("#btn-opacity50").click(function() {
            $(".img-overlay").css("opacity", "0.5");
        });
        $("#btn-opacity100").click(function() {
            $(".img-overlay").css("opacity", "1.0");
        });
    });
</script>
